事件觸發(trigger)

除了 HTML 原生的 button、input 等事件，HTMX 可以在任意標籤的屬性上加入其他的事件觸發，使用方式為hx-trigger="事件名稱"，例如：hx-trigger="mouseenter"，有點尷尬的是雖然不用寫 JS，開發者自己還是得知道 JS 有哪些事件可以使用。

除了單一事件，也可以使用組合鍵觸發，例如：

• hx-trigger="click[ctrlKey]"
• hx-trigger="click[ctrlKey&&shiftKey]"

事件修飾符(modifiers)

HTMX 提供了一些常用的修飾符，只要加在事件名稱後面即可，例如：hx-trigger="mouseenter once"

目前可以使用的修飾符如下：

• changed - 只有資料改變才會觸發事件
• delay:<time interval> - 也就是 Debounce，冒號後方加上時間的數值
• throttle:<time interval> - Throttle（Debounce 的好兄弟），冒號後方加上時間的數值
• from:<CSS Selector> - 從其他 element 來觸發事件，冒號後方加上 CSS 選擇器（#id, .className)

以下是官方的範例：（常見的搜尋功能）

<input type="text" name="q"
    hx-get="/trigger_delay"
    hx-trigger="keyup changed delay:500ms"
    hx-target="#search-results"
    placeholder="Search..."
>
<div id="search-results"></div>

此處的 hx-trigger 設定了

1. 監聽 keyup 事件
2. 只有 input 的值改變是才會觸發 keyup
3. 為事件觸發加上 500ms 間隔，避免過度頻繁的事件影響效能

參考資料：官方文件（https://htmx.org/docs/#triggers）